﻿<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" %>
<SharePoint:RenderingTemplate ID="ColorPickerFieldControl" runat="server">
  <Template>

<%--  <script type="text/javascript">
      if (!window.jQuery) {
          var script = document.createElement('script');
          script.type = "text/javascript";
          script.src = "/_layouts/PepsiCo.RBS/jquery-1.8.3.min.js";
          document.getElementsByTagName('head')[0].appendChild(script);
      }
  </script>--%>
    <script type="text/javascript" src="/_layouts/PepsiCo.RBS/jquery-1.8.3.min.js"></script>
    <link type="text/css" href="/_layouts/PepsiCo.RBS/ColorPicker/colorPicker.css"  rel="stylesheet" />
    <script type="text/javascript" src="/_layouts/PepsiCo.RBS/ColorPicker/jquery.colorPicker.js"></script>

    <style type="text/css">
    .TextField-container input
    {
        width: 100px !important;    
    }
    .ColorPicker-container .ColorPicker
    {
        display:none;    
    }
    </style>

    <div class="TextField-container" style="float:left">
        <asp:TextBox id="TextField" runat="server"></asp:TextBox>
    </div>
    <div class="ColorPicker-container" style="float:left">
        <input type="text" class="ColorPicker" onchange="ColorChanged();" ></input>                            
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.ColorPicker').colorPicker({ showHexField: false });

            $('.TextField-container input').change(function () {
                var newVal = $(this).val();

                if (newVal.match(/^#([0-9A-F]{6}|[0-9A-F]{3})$/i)) {
                    $(".ColorPicker").val($(this).val());
                    $(".ColorPicker").change();

                    $(this).val(newVal.toUpperCase());
                }
                else {
                    $(this).val($(".ColorPicker").val().toUpperCase());
                }
            });

            $('.TextField-container input').change();
        });

        function ColorChanged() {
            if ($(".ColorPicker").val() != $('.TextField-container input').val()) {
                $('.TextField-container input').val($(".ColorPicker").val().toUpperCase());
            }
        }
    </script>
  </Template>
</SharePoint:RenderingTemplate>
<SharePoint:RenderingTemplate ID="ColorPickerFieldControlForDisplay" runat="server">
  <Template>
  <script type="text/javascript" src="/_layouts/PepsiCo.RBS/jquery-1.8.3.min.js"></script>
  <div style="float:left">
    <asp:Label ID="ColorPickerValueForDisplay" runat="server" CssClass="ColorPickerValueForDisplay"/>
  </div>
  <div style="float:left">
    <div class="rendercolorpickerfield" style="margin-left:5px;border: 1px solid #CCCCCC;height:12px;width:12px;"> </div>
  </div>
  <script type="text/javascript">
       $(document).ready(function () {
           $('.rendercolorpickerfield').css("background-color", $(".ColorPickerValueForDisplay").text());
       });
  </script>
  </Template>
</SharePoint:RenderingTemplate>